<template>
  <view class="pageContent" >
    <view class="remote">
      <view class="remoteMain" @click="doorListCli(index)"
      v-for="(item,index) in doorList" :key="index">
        <image class="remoteBac" v-show="doorIndex==index" :src="images +'/selectGate.png'" />
        <image class="remoteIco" :src="localImages +'/damen.png'"/>
        <view class="remoteGate" :class="item.faceSync>0 ? 'hasText': '' ">{{item.gatePostName || '悦江苑 东门'}}</view>
        <view class="remoteName">{{item.equipmentName || '设备名称'}}</view>
        <!-- <view class="remoteStaTex"  v-if="index==5">待审核</view> -->
        <!-- <image class="remoteStaIco" v-if="index==4" :src="images +'/faceSyn0.png'"/> -->
        <view class="remoteStaTex" v-if="item.faceSync==1">待审核</view>
        <image class="remoteStaIco" v-if="item.faceSync==2" :src="images +'/faceSyn0.png'"/>
        <image class="remoteStaIco" v-if="item.faceSync==3" :src="images +'/faceSyn3.png'"/>
        <image class="remoteSel" v-if="doorIndex==index" :src="localImages +'/doorSelect.png'" />
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import config from '../../../../static/config.js'
import util from '../../../../static/utils/util.js'
export default {
  data () {
    return {
      images: config.images,
      localImages: config.localImages,
      doorList: [],
      room: '',
      item: '',
    }
  },
  computed: {
    ...mapState({
      myInfo: state => state.user.myInfo
    })
  },
  onLoad(options){
    var room = wx.getStorageSync('room');
    this.room=room;
    if(options.json){
      console.warn('options.json',options.json)
      var item=JSON.parse(options.json)
      this.item=item;
      var title="门禁权限";
    }else {
      var room = wx.getStorageSync('room');
      // this.item={
        // "ownerId": 32,
        // "projectId": 1,
        // "roomId": 3,
      // }
      this.item=room
      var title="审核结果";

    }
    wx.setNavigationBarTitle({title: title})
    this.gateList();
  },
  onShow(){
  },
  methods: {
    addMem(){
      wx.navigateTo({url:'/pages/subMe/addMem/main'})
    },
   //获取该住户的门禁列表
   ownerGatepostList() {
     var item =this.item;
     var url='/UserServer/owner/info/ownerGatepostList'
     var params={
       ownerId: item.ownerId,
       projectId: item.projectId,
       roomId: item.roomId,
     }
     util.wxRequestPro(url,params).then((res)=>{
       if(res.param) {
         var param=res.param
         // param[0].faceSync="3"
         param.map((item)=>{
           item.faceSync=parseInt(item.faceSync)
         })
         this.doorList=param;
       }
     })
   },
    // /mini/gate/staffGateList 获取该住户的门禁列表
    gateList() {
      var url='/UserServer/mini/gate/staffGateList'
      var params={
        status:0
      }
      util.wxRequestPro(url,params).then((res)=>{
       if(res.param) {
         var param=res.param
         // param[0].faceSync="3"
         param.map((item)=>{
           item.faceSync=parseInt(item.faceSync)
         })
         this.doorList=param;
       }
      })
    },

  }
}
</script>

<style lang="stylus" scoped>
.pageContent{
  min-height 100vh
  padding 0rpx 0rpx 0rpx 0rpx
  background $background
}
.remote
  padding 20rpx 30rpx 20rpx 30rpx
.remoteMain
  position relative
  display flex
  flex-direction column
  justify-content center
  box-shadow: 4px 4px 22px 2px rgba(212, 212, 212, 0.39);
  width: 100%;
  height 120rpx;
  border-radius: 10rpx;
  padding 0rpx 20rpx 0rpx 116rpx
  background: #FFFFFF;
  /* border 1px solid #666 */
  margin-bottom 20rpx;
  z-index 0
.remoteIco
  position absolute
  top 50%
  left 40rpx
  margin-top -25rpx
  width: 56rpx;
  height: 46rpx;
  background: #84D7FF;
  /* border 1px solid #84D7FF */
.remoteStaTex{
  position absolute
  top 50%
  right 30rpx
  margin-top -25rpx
  color #FF8080
}
.remoteStaIco{
  position absolute
  top 50%
  right 40rpx
  margin-top -25rpx
  width: 46rpx;
  height: 46rpx;
  /* border 1px solid #84D7FF */
}

.remoteSel
  position absolute
  bottom 0rpx
  right 0rpx
  width: 56rpx;
  height: 36rpx;
  /* border 1px solid #84D7FF */
.remoteGate{
  font-size: 30rpx;
  color: #030303;
  line-height: 42rpx;
}
.remoteGate.hasText{
  padding-right 80rpx;
}
.remoteName{
  font-size: 26rpx;
  color: #92A7B3;
}

.remoteBac{
  position absolute
  width: 100%;
  width: 100%;
  top 0rpx
  left 0rpx
  z-index -1
}
</style>
